<template>
  <view class="content" >
    <!--搜索-->
    <view class="search">
      <u-search :show-action="false" borderColor="#7A7DEE" bgColor="#FFFFFF" placeholder="輸入關鍵字搜索"
                v-model="keyword" @focus="toSearch"></u-search>
    </view>
    <!-- 分类 -->
    <view class="category">
      <view class="nav">
        <scroll-view class="bg" scroll-y="true" :scroll-top="scrollTop" :scroll-with-animation="true">
          <view class="nav-item" :class="{'ac':active == index}" v-for="(item,index) in categorylist"
                :key="index" @click="changeNav(index,item.id)">
            {{ item.cat_name |filter_cat_name }}
          </view>
          <view style="height: 200rpx;">

          </view>

        </scroll-view>
      </view>
      <view class="goodsBox">
        <scroll-view scroll-y="true">
          <view>
            <view class="box-top">
              <view class="top-l" v-if="categorylist[active]">
                {{ categorylist[active].cat_name |filter_cat_name }}
              </view>
              <view class="top-r"
                    @click="toSearchgoods(categorylist[active].id,categorylist[active].cat_name)">
                <view class="all">
                  全部
                </view>
                <u-icon size="28rpx" name="arrow-right"></u-icon>
              </view>
            </view>
            <view class="goods" v-if="categorylist[active]">
<!--              <view class="goods-item" v-for="(item,index) in goods" :key="index"-->
<!--                    @click="toDetails(item.goods_id)">-->
<!--                <image :src="getFirstImageLink(item.goods_images)" mode="aspectFit"></image>-->
<!--                <view class="goods_name">{{ item.goods_name }}</view>-->
<!--              </view>-->
              <view  class="goods-item" v-for="(item,index) in categorylist[active].child" :key="index"
                    @click="toSearchgoods(item.id,item.cat_name)">
                <image :src="getFirstImageLink(item.image)" mode="aspectFit"></image>
                <view class="goods_name">{{ item.cat_name }}</view>
              </view>
            </view>
          </view>
        </scroll-view>
      </view>
    </view>

  </view>
</template>
<script>
import {
  getclassify, getclassifylist, getSearch
} from '@/network/api/home.js'
import {
  mapActions
} from 'vuex'

export default {
  data() {
    return {
      keyword: '',
      active: 0,
      activeId: '',
      scrollTop: 0,
      height: 0,
      categorylist: [],
      rightList: [],
      goods: [],
      searchdata: {
        lang: 'cn',
        id: '',
        user_id: '',
        brand: '',
        sort: '',
        search: '',
        priority: '',
        page: 1,
        number: 21
      },
      activetype: {
        0: 696,
        1: 717,
        2: 863,
        3: 893,
      },
    }
  },
  filters: {
    filter_cat_name(name) {
      if (name == '醫療用品類') {
        return '衛生護理用品'
      } else {
        return name
      }
    }

  },
  onShow() {
    // this.getclassify()
    // 获取导航'.nav-item'的高度，在点击导航触发changeNav时，使其向下滚动
    this.getclassifylist()

  },
  onLoad() {
    uni.$on('active', (index) => {
      if (index.active) {
        console.log(index.active, '1111111111');
        this.active = index.active
        this.activeId = this.activetype[index.active]
      }
    })
  },
  onUnload() {
    uni.$off('active');
  },
  methods: {
    getclassifylist() {
      getclassifylist().then(res => {
        console.log(res, '分类');

        this.categorylist = res.data.categorylist
        this.activeId = this.activeId ? this.activeId : this.categorylist[0].id
        this.getSearchByID()
        // this.active = res.data[0].id
        // this.getclassify()
      })
    },
    ...mapActions(['toDetails']),
    toSearchgoods(id, title) {
      console.log(id, title);
      if (title == '醫療用品類') {
        title='衛生護理用品'
      }
      uni.navigateTo({
        url: `/pages/classify/search/result?id=${id}&title=${title}`
      })
    },
    navigateToDetails(goods_id) {
      this.toDetails(goods_id)
    },
    getFirstImageLink(links) {
      // 将链接字符串按逗号分隔成数组
      const linksArray = (links || '').split(",");

      // 去除数组中每个链接的空格
      const trimmedLinks = linksArray.map(link => link.trim());

      // 检查数组是否为空，并且返回第一个链接
      if (trimmedLinks.length > 0) {
        return trimmedLinks[0];
      } else {
        // 如果links为空，返回一个默认值或者抛出错误，视需求而定
        return "默认图片链接";
      }
    },
    toSearch() {
      // Replace 'TargetPage' with the page name you want to navigate to
      uni.navigateTo({
        url: '/pages/classify/search/index',
      });
    },
    async getSearchByID() {
      this.searchdata.id = this.activeId
      //加载中
      uni.showLoading({
        title: '加載中'
      })
      const res = await getSearch(this.searchdata)
      uni.hideLoading()
      this.goods = res.data.list.data
      console.log(this.goods, 'goods');
    },
    changeNav(index, id) {
      this.active = index;
      this.activeId = id
      // this.getSearchByID()
    }
  }
}
</script>
<style scoped lang="scss">
.content {
  .status_bar {
    height: var(--status-bar-height);
    width: 100vw;
  }

  .search {
    //margin: 12rpx 32rpx
    position: fixed;
    top:var(--status-bar-height);
    z-index: 999;
    width: 90%;
    left: 50%;
    transform: translateX(-50%);
  }
}

.category {
  margin-top: var(--status-bar-height);
  padding-top:60rpx;
  display: flex;
  position: absolute;
  width: 100%;
  height: calc(100% - var(--status-bar-height));
  //height: 100vh;
  /* 隐藏滚动条样式 */
  ::-webkit-scrollbar {
    width: 0;
    height: 0;
  }

  uni-scroll-view {
    height: 100%;
  }

  .bg {
    background: #F7F8F9;
  }

  .nav {
    width: 200rpx;

    .nav-item {
      width: 200rpx;
      height: 100rpx;
      display: flex;
      align-items: center;
      justify-content: center;
      background: #F7F8F9;
      font-size: 28rpx;
      color: #505660;
      position: relative;
      flex-wrap: wrap;
      text-align: center;
    }

    .ac {
      background: #fff;
      font-size: 28rpx;
      font-family: PingFang SC;
      font-weight: bold;
      color: #1F1F1F;
    }

    .ac:before {
      content: '';
      display: block;
      position: absolute;
      left: 0;
      top: 0;
      width: 10rpx;
      height: 100rpx;
      background: linear-gradient(180deg, #645AED 0%, #645AED 100%);
      border-radius: 2rpx;
    }
  }

  .goodsBox {
    width: 550rpx;
    padding-left: 50rpx;

    .box-top {
      display: flex;
      justify-content: space-between;
      align-items: center;
      height: 100rpx;

      .top-l {
        font-size: 28rpx;
        font-family: PingFang SC;
        font-weight: bold;
        color: #1F1F1F;
      }

      .top-r {
        display: flex;
        align-items: center;

        font-size: 28rpx;
        font-family: PingFang SC;
        font-weight: 500;
        color: #1F1F1F;
        margin-right: 32rpx;
      }
    }

    .goods {
      display: flex;
      flex-wrap: wrap;
      padding: 30rpx 0;

      .goods-item {
        width: 160rpx;
        display: flex;
        flex-direction: column;
        align-items: center;
        flex-wrap: wrap;
        margin-bottom: 56rpx;

        // margin-right: 65rpx;
        image {
          width: 100rpx;
          height: 100rpx;
          border-radius: 4rpx;
        }

        .goods_name {
          font-size: 24rpx;
          color: #1F1F1F;
          width: 100rpx;
          height: 100rpx;
          overflow: hidden;
          -webkit-line-clamp: 2;
          text-overflow: ellipsis;
          display: -webkit-box;
          -webkit-box-orient: vertical;
        }

      }
    }
  }
}
</style>
